<template>
  <div class="homeBox">
    <el-container>
      <el-aside :width="isCollapse?'64px':'200px'" :style="'backgroundColor:'+color">
        <!-- 菜单不折叠显示如下 -->
        <div v-if="!isCollapse">
          <!-- 系统logo -->
          <div class="logo"></div>
          <!-- 用户信息 -->
          <div class="user">
            <!-- 用户头像 -->
            <div class="imgFrame">
              <el-avatar
                shape="circle"
                :size="100"
                :src="'http://127.0.0.1:666/'+userInfo.avatar"
                icon="el-icon-user-solid"
              ></el-avatar>
            </div>
            <!-- 用户名称-->
            <p v-text="userInfo.username" class="username"></p>
          </div>
        </div>
        <!--  菜单折叠显示如下-->
        <div v-else>
          <div class="head">
            <el-avatar
              shape="circle"
              size="large"
              :src="'http://127.0.0.1:666/'+userInfo.avatar"
              icon="el-icon-user-solid"
            ></el-avatar>
          </div>
        </div>
        <!-- 菜单列表 -->
        <el-menu
          :default-active="activeLink"
          :background-color="color"
          text-color="#fff"
          active-text-color="#555"
          unique-opened
          :collapse-transition="false"
          :collapse="isCollapse"
          router
        >
          <!-- 一级菜单 -->
          <el-submenu :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <template slot="title">
              <i :class="menuIcon[menu.id]"></i>
              <span v-text="menu.menuName"></span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="sub.path"
              v-for="sub in menu.children"
              :key="sub.id"
              @click="saveCurrentLink(sub.path)"
            >
              <template slot="title">
                <i :class="submenuIcon[sub.id]"></i>
                <span v-text="sub.submenuName"></span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="40px">
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <!-- 控制缩略菜单区域 -->
              <div class="thumbnail" :style="'color:'+color">
                <i class="el-icon-s-fold" @click="collapse"></i>
              </div>
            </el-col>
            <el-col :span="3">
              <!-- 用户头像 -->
              <div class="userInfo">
                <!-- 用户头像框 -->
                <el-avatar
                  shape="square"
                  size="small"
                  :src="'http://127.0.0.1:666/'+userInfo.avatar"
                  icon="el-icon-user-solid"
                ></el-avatar>
                <!-- 用户名称-->
                <span v-text="userInfo.username" class="username"></span>
                <!-- 下拉菜单 -->
                <el-dropdown placement="bottom" @command="handleCommand">
                  <span>
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="el-icon-setting" command="set">设 置</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-delete" command="logout">注 销</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- '设置'对话框 -->
    <el-dialog title="设置" :visible.sync="setDialogVisible" width="50%">
      <!-- 设置主题区域 -->
      <div class="theme">
        <span>主题：</span>
        <el-color-picker v-model="color" show-alpha :predefine="predefineColors" size="small"></el-color-picker>
      </div>
      <!-- 待定 -->
      <div class="other">
        <span>其他：</span>
        <span>敬请期待...</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用来存放菜单列表
      menuList: [],
      // 控制设置对话框的显示和隐藏
      setDialogVisible: false,
      // 主题颜色
      color: '#51b066',
      // 预定义主题颜色
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#51b066',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      // 主菜单图标
      menuIcon: {
        '10': 'el-icon-s-custom',
        '20': 'el-icon-s-flag',
        '30': 'el-icon-reading',
        '40': 'el-icon-s-data ',
        '50': 'el-icon-message-solid',
        '100': 'el-icon-receiving'
      },
      // 子菜单图标
      submenuIcon: {
        '11': 'el-icon-user',
        '12': 'el-icon-user-solid',
        '21': 'el-icon-search',
        '22': 'el-icon-edit-outline',
        '31': 'el-icon-date',
        '41': 'el-icon-s-order',
        '51': 'el-icon-chat-line-round',
        '101': 'el-icon-search'
      },
      // 保存激活的链接
      activeLink: '',
      // 控制菜单是否折叠
      isCollapse: false
    }
  },
  created() {
    // 获取菜单列表
    this.getMenuList()
    // 获取当前激活的子菜单项
    this.activeLink = sessionStorage.getItem('currentLink')
  },
  methods: {
    // 获取菜单列表
    async getMenuList() {
      let res = await this.$http.get('menus')
      // 登录失败
      if (res.meta.status !== 200) {
        this.$message({
          showClose: true,
          message: '请先登录!!!',
          type: 'error'
        })
        // 重定向回登录页面
        this.$router.push('/login')
      }
      // 登录成功
      this.menuList = res.data
    },
    // 监听下拉菜单中的不同事件
    handleCommand(command) {
      if (command === 'logout') {
        // 清除token
        localStorage.clear('token')
        // 重定向到登录页
        this.$router.push('/login')
      } else if (command === 'set') {
        // 显示设置对话框
        this.setDialogVisible = true
      }
    },
    // 保存激活子菜单的路径
    saveCurrentLink(currentLink) {
      // 保存到sessionStorage中
      sessionStorage.setItem('currentLink', currentLink)
    },
    // 水平折叠菜单
    collapse() {
      this.isCollapse = !this.isCollapse
    }
  },
  computed: {
    // 获取登录用户的信息
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'))
    }
  }
}
</script>

<style lang="less" scoped>
.homeBox {
  height: 100%;
  background-color: #f6f6f6;
}
.el-header {
  background-color: #fff;
  .thumbnail {
    font-size: 25px;
    line-height: 40px;
    // color: #a7b8c2;
  }
  .userInfo {
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    .username {
      margin: 0 20px;
      font-size: 12px;
      color: #666;
    }
  }
}
.el-aside {
  // background-color: #51b066;
  .logo {
    height: 40px;
    background-image: url('../assets/images/logo2.png');
    // border-bottom: 1px solid #ccc;
  }
  .user {
    width: 110px;
    margin: 10px auto;
    text-align: center;
    // background-color: #fff;
    .imgFrame {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid #fff;
    }
    p {
      margin-top: 5px;
      color: #f6f6f6;
    }
  }
  .head {
    width: 40px;
    height: 40px;
    margin: 28px auto 10px;
    border: 2px solid #fff;
    border-radius: 50%;
  }
  .el-menu {
    border-right: none;
    i {
      color: #fff !important;
    }
  }
  // .el-submenu__title:focus,
  .el-submenu__title:hover,
  .el-menu-item:hover,
  .el-menu-item.is-active {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }
}
.theme,
.other {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>